<template>
	<view>
		<view class="new-newList" :style="{marginTop:newStyle.mt + 'rpx',marginBottom:newStyle.mb + 'rpx',padding:newStyle.pad + 'rpx',boxShadow:newStyle.bs}">
			<u-row gutter="16">
				<u-col span="9">
					<view class="demo-layout bg-purple">
						<view class="new-newList-title">
							<view class="nntt"><text>{{newitem.headline}}</text></view>
						</view>
						<view class="new-newList-from">
							<view class="nntf"><text>{{newitem.from}}</text></view>
						</view>
					</view>
				</u-col>
				<u-col span="3">
					<view class="demo-layout bg-purple-light">
						 <view class="new-img">
							 <image :src="newitem.img" mode="aspectFit"></image>
						 </view>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		name:"newItem",
		data() {
			return {
				
			};
		},
		mounted() {
			console.log(this.newStyle)
		},
		props:['newitem','newStyle']
	}
</script>

<style scoped lang="scss">
	.new-newList{
		// margin-top:30rpx ;
		// margin-bottom: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		.new-img{
			   width: 100%;
			   display: flex;
			   justify-content: center;
			   align-items: center;
			   image{
				   width: 90rpx;
				   height: 90rpx;
			   }
		 }
		 
		 .new-newList-title{
			   width: 100%;
			   .nntt{
			   		width: 100%;
					display: -webkit-box;  
					-webkit-line-clamp: 2;  
					-webkit-box-orient: vertical;    
					overflow: hidden;  
					text-overflow: ellipsis;  
					height: 84rpx;
					
			   	   text{
			   		   font-size: 28rpx;
			   		   color:rgb(16, 16, 16);
			   	   }
			   }
		 }
		 
		 .nntf{
			   text{
				   font-size: 20rpx;
				   color: rgb(154, 154, 154);
			   }
		 }
	}
	

</style>